<template>
  <view>
    <view class="toptitle">
      <text class="toptitleItem" v-for="item in zhufuBjArr" :key="item.id" @click="tiaozhuan(item.id)">{{item.leixing}}</text>
    </view>
    <!-- <image src="/static/logo.png"></image> -->
    <view class="uni-padding-wrap">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            :circular="true"
            :indicator-dots="true"
            :autoplay="false"
            :interval="5000"
            :duration="500"
            next-margin="15px"
            previous-margin="20px"
            indicator-active-color="#F48FB1"
            current="0"
            @change="bindchange"
            @click="addzhufu"
          >

            <swiper-item v-for="item in xuanzeBj.bg" :key="item.bjId">
              <view class="swiper-item bg">
                <image :src="item.imgSrc"></image>
              </view>
            </swiper-item>
          
          </swiper>
        </view>
      </view>
    </view>

    <button class="toview" @click="fillBlessing">查看我的祝福</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dangqianBJNum: 0,
      dangqian:0,
      xuanzeBj:[],
      chuanData:[],
      
      zhufuBjArr:[
        {
          id:1,
          leixing:'生日',
          bg:[
            {bjId:1,imgSrc:'/static/hekaBg.jpg'},
            {bjId:2,imgSrc:'/static/hekaBg.jpg'},
            {bjId:3,imgSrc:'/static/hekaBg.jpg'},
          ]
        },
        {
          id:2,
          leixing:'节日',
          bg:[
            {bjId:1,imgSrc:'/static/logo.png'},
            {bjId:2,imgSrc:'/static/logo.png'},
          ]
        },
        {
          id:3,
          leixing:'更多',
          bg:[
            {bjId:1,imgSrc:'/static/logo.png'}
          ]
        },
      ]
    };
  },
  onLoad(e) {
    // console.log(e);
    // console.log(this.dangqian);
    this.bjxz(this.dangqian+1)
  },
  methods: {
    bjxz(num){
      this.zhufuBjArr.map(item=>{
        if(item.id===num){
          return this.xuanzeBj={...item}
        }
      })
    },
    tiaozhuan(val) {
      //祝福类型的的id
      console.log(val);
      this.dangqian=val-1

      this.bjxz(val)
      this.dangqianBJNum=1
    },
    bindchange(e) {
      // 当前的背景图
      this.dangqianBJNum = e.detail.current+1;
      // console.log(e);
      console.log(this.dangqianBJNum);
      // console.log(this.xuanzeBj)

    },
    addzhufu(){
      this.xuanzeBj.bg.map(item=>{
        if(item.bjId===this.dangqianBJNum){
          return this.chuanData={...item}
        }
      })
      console.log(this.chuanData);
      wx.navigateTo({
        url: "/pages/hekaXiangqing/addZhufu?imgSrc="+this.chuanData.imgSrc,
      });
    },
    fillBlessing() {
      // 页面跳转
      wx.navigateTo({
        url: "/pages/heka/myzhufu"
      });
    },
  },
};
</script>

<style scoped>
.toptitle {
  width: 94%;
  padding: 4% 3%;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  justify-content: space-around;
  border-bottom: 20rpx solid #F4F4F4;
}

.uni-padding-wrap {
  /* border: 1px solid red; */
}
.page-section-spacing {
  width: 80%;
  margin-left: 10%;
  padding: 70rpx 0 0;
  /* border: 1px solid red; */
}
.swiper {
  height: 650rpx;
  position: relative;
}
.swiper-item {
  display: block;
  width: 474rpx;
  height: 575rpx;
  line-height: 575rpx;
  border-radius: 20rpx;
  text-align: center;
  position: absolute;
}
/* .swiper-item image {
  position: absolute;
  width: 100%;
} */
.bg {
  background-image: linear-gradient(to bottom, #FEECBB, #F48FB1);
}
.bg image{
  width: 100%;
  height: 100%;
}
.toview {
  margin-top: 150rpx;
  width: 400rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #F48FB1;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
</style>
